<!DOCTYPE html>
<html>

<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
    </canvas>

    <script>


        var c = document.getElementById("myCanvas");
        console.log(c);

        var ctx = c.getContext("2d");

        console.log(ctx.canvas.scrollWidth);
        console.log(ctx.canvas.scrollHeight);

        // 矩形de w
        var WcVA = ctx.canvas.scrollWidth - 200;
        // 矩形de H
        var HcVA = ctx.canvas.scrollHeight / 6 - 50;

        var col = ["red", "green", "blue", "skyblue", "limegreen", "pink"]
        var Arry =
            [
                {
                    name: "照明",
                    lineNum: 80,
                    CloseNum: 20,
                    col : "red"
                },
                {
                    name: "信息屏",
                    lineNum: 50,
                    CloseNum: 50,
                    col : "green"
                },
                {
                    name: "广播",
                    lineNum: 70,
                    CloseNum: 30,
                    col : "blue"
                },
                {
                    name: "一键告警",
                    lineNum: 60,
                    CloseNum: 40,
                    col : "skyblue"
                },
                {
                    name: "监控",
                    lineNum: 35,
                    CloseNum: 75,
                    col : "limegreen"
                },
                {
                    name: "气象环境",
                    lineNum: 80,
                    CloseNum: 20,
                    col : "pink"
                }
            ]

        console.log(Arry);
        //  totolNum;

        for (let i = 0; i < Arry.length; i++) {
            var totolNum;
            // console.log(Arry[i]);
            // 计算总数
            totolNum = Arry[i].lineNum + Arry[i].CloseNum;
            var slineNum;
            // 计算百分比
            slineNum = Arry[i].lineNum / totolNum;
            var sswq = (WcVA * slineNum) / 20;
            // 计算每个小矩形占据的数量
            console.log(sswq);

            // 矩形数据
            // 开始绘制
            ctx.beginPath();
            // 边
            ctx.lineWidth = "1";
            // 颜色
            ctx.strokeStyle = "#FF6666";
            // 画图
            ctx.rect(80,  10 + i *  60 , WcVA, 20);
            //context.rect(x,y,width,height);
            // 参数	描述
            // x	矩形左上角的 x 坐标。
            // y	矩形左上角的 y 坐标。
            // width	矩形的宽度，以像素计。
            // height	矩形的高度，以像素计。
            ctx.stroke();
            // /填充颜色
            ctx.fillStyle = Arry[i].col;
            ctx.font = "12px Arial";
            // 左边的标题
            ctx.fillText(Arry[i].name , 10, 30 + i *  60 );
            
            //context.fillText(text,x,y,maxWidth);
            //text	规定在画布上输出的文本。
            // x	开始绘制文本的 x 坐标位置（相对于画布）。
            // y	开始绘制文本的 y 坐标位置（相对于画布）。
            // maxWidth	可选。允许的最大文本宽度，以像素计。
           
            for (var j = 0; j < sswq; j++) {
                // 依据数量循环
                ctx.fillRect(80 + j * sswq,  10 +  i *  60 , sswq - 2,  HcVA );
            }

            // context.fillRect(x,y,width,height);
                        
            // 参数	描述
            // x	矩形左上角的 x 坐标
            // y	矩形左上角的 y 坐标
            // width	矩形的宽度，以像素计
            // height	矩形的高度，以像素计


            // 右边的文字和数据

            ctx.font = "15px Arial";
            ctx.fillText("在线", WcVA + 90, 30 + i *  60 );
            ctx.fillText(Arry[i].lineNum, WcVA + 130, 30 + i *  60 );
            ctx.font = "15px Arial";
            ctx.fillStyle = "#000";
            ctx.fillText("离线", WcVA + 90, 55 + i *  60 );
            ctx.fillText(Arry[i].CloseNum, WcVA + 130, 55 + i *  60 );

        }

// var totolNum = 100;
// var lineNum = 80;
// var CloseNum = 20 ;
// var s = lineNum / totolNum;

// var sswq = (WcVA * s) / 20;
// console.log(sswq);

// // 矩形数据
// ctx.beginPath();
// ctx.lineWidth="2";
// ctx.strokeStyle="#999999";
// ctx.rect(50,10,WcVA,50);
// ctx.stroke();

// ctx.fillStyle="#009966";
// ctx.font="15px Arial";
// ctx.fillText("照明",10,HcVA);

// for (var i = 0; i < sswq; i++) {
//     ctx.fillRect(50 + i * sswq ,10, sswq - 2, HcVA);
// }


// ctx.font="15px Arial";
// ctx.fillText("在线",WcVA + 60 ,30);
// ctx.fillText("80",WcVA + 100 ,30);
// ctx.font="15px Arial";
// ctx.fillStyle="#000";
// ctx.fillText("离线",WcVA + 60,55);
// ctx.fillText("20",WcVA + 100 ,55);





// // 矩形数据
// ctx.beginPath();
// ctx.lineWidth="2";
// ctx.strokeStyle="#ddd";
// ctx.rect(50,80,500,50);
// ctx.stroke();
// ctx.fillStyle="#000";
// ctx.font="15px Arial";
// ctx.fillText("信息屏",0,120);

// ctx.fillRect(50,80,20,50);
// ctx.fillRect(75,80,20,50);
// ctx.fillRect(100,80,20,50);
// ctx.fillRect(125,80,20,50);
// ctx.fillRect(155,80,20,50);
// ctx.fillRect(185,80,20,50);
// ctx.fillRect(210,80,20,50);
// ctx.fillRect(235,80,20,50);
// ctx.fillRect(260,80,20,50);
// ctx.fillRect(285,80,20,50);

// // 绿色矩形
// ctx.beginPath();
// ctx.lineWidth="4";
// ctx.strokeStyle="green";
// ctx.rect(30,30,50,50);
// ctx.stroke();

// 蓝色矩形
// ctx.beginPath();
// ctx.lineWidth="10";
// ctx.strokeStyle="blue";
// ctx.rect(50,50,150,80);
// ctx.stroke();



// var c=document.getElementById("myCanvas");
// var ctx=c.getContext("2d");
// ctx.fillStyle="#0000ff";
// ctx.font="20px Arial";

// ctx.fillText("照明",10,40);
// ctx.fillRect(60,10,500,50);
// ctx.translate(0,70);

// ctx.fillStyle="#000";
// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);

// ctx.fillStyle="#eee";
// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);

// ctx.fillStyle="#000";
// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);

// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);

// ctx.fillStyle="#eee";
// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);

// ctx.fillStyle="#eee";
// ctx.fillRect(10,10,500,50);
// ctx.translate(0,70);
// ctx.fillRect(10,10,500,50);

    </script>

</body>

</html>